<template>
  <div class="shop_list">
    <div class="shop_item" v-for="item in shops" :key="item.id" @click="goodInfo(item.id)">
      <img src="http://img10.3lian.com/c1/newpic/06/10/67.jpg" alt>
      <h1 class="title">{{item.title}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{item.nowPrice}}</span>
          <span class="old">￥{{item.oldPrice}}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余{{item.count}}件</span>
        </p>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
        shops:[
            {id:1,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:1,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:2,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:3,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:4,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:5,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:6,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:7,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:8,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:9,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:10,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:11,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:12,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:13,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},
            {id:14,title:"诺基亚N3",nowPrice:999,oldPrice:1099,count:34},

        ]
    }
  },
  methods:{
    goodInfo(id){
      this.$router.push({ name: 'goodInfo', params: { id: id }}
      );
    }
  }
};
</script>
<style lang="less" scoped>
.shop_list {
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  justify-content: space-between;
  .shop_item{
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0 0 8px #ccc;
      padding: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img{
          width: 100%;
      }
      .title{
          font-size: 13px;
      }
      .info{
          background-color: #eeeeee;
          
          p{
              margin: 0px;
              padding: 3px;
          }
          .price{
              .now{
                  font-size: 16px;
                  color: red;
                  font-weight: bold;
              }

              .old{
                  font-size: 12px;
                    text-decoration: line-through;
              }
          }
          .sell{
              font-size: 14px;
              display: flex;
              justify-content: space-between;
          }
      }
  }
}
</style>
